<template>
  <view class="content">
    <view class="row">
      <text class="label">公钥信息：</text>
      <textarea class="value" v-model="publicKey" placeholder="公钥信息" maxlength="-1"></textarea>
    </view>
    <view class="row">
      <text class="label">私钥信息：</text>
      <textarea class="value" v-model="privateKey" placeholder="私钥信息" maxlength="-1"></textarea>
    </view>
    <view class="row">
      <text class="label">明文信息：</text>
      <input class="value" v-model="text" placeholder="明文信息" maxlength="-1"></input>
    </view>
    <view class="result">
      <text class="crypto-text">加密结果：{{encryptedString}}</text>
      <text class="crypto-text">解密结果：{{decryptedString}}</text>
    </view>
    <view class="btn-row">
      <button class="btn" @click="initKey">初始化密钥</button>
      <button class="btn" @click="encryptData">加密</button>
      <button class="btn" @click="decryptData">解密</button>
    </view>
  </view>
</template>

<script>
  import JSEncrypt from '@/jsencrypt';

  var DEFAULT_PUBLIC_KEY =
    `-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC5tNWcvUTkx143qIFM4/uBpsPm
Xt4ckPQ07V7Sg3cntX+adVL6eVKRUSPNgAqUgRoWtalVqyzNHIKEAFCEveiDS0rc
527HOEgy1DySe0i9aoRvW+065356lVzT1Escq9L0kGwmCDuzGTugpUMSbsb8W+ob
RuVBrcJlRh3rrpNtNwIDAQAB
-----END PUBLIC KEY-----`;

  var DEFAULT_PRIVATE_KEY =
    `-----BEGIN RSA PRIVATE KEY-----
MIICXQIBAAKBgQC5tNWcvUTkx143qIFM4/uBpsPmXt4ckPQ07V7Sg3cntX+adVL6
eVKRUSPNgAqUgRoWtalVqyzNHIKEAFCEveiDS0rc527HOEgy1DySe0i9aoRvW+06
5356lVzT1Escq9L0kGwmCDuzGTugpUMSbsb8W+obRuVBrcJlRh3rrpNtNwIDAQAB
AoGBAICo/bn7E2khi3AqSXLZHN3liSHpJh9KejbVIfXdaUdUotSDZnrsZT0Spyhw
BmR+0XFcaLZWwtJUZ0RG54IgBJ8K7e7IVSIsQGSLcIFfdr00nbIY324XfCjjrTZp
8Aq+VKMU+rKglt3SJoI8qhgSmQPpTNaVgSCtHwgqGOsx4Xt5AkEA7UFFb1kXiSIi
72GZRBhMdbywaBwzB/Cgraq/AgwGAgVhcOlfnWJjCiEcI1tBzPoF3Vxz1yFiEZ6X
4eQ6IOPgUwJBAMhg8H/h+0uQh0Ej52qHkFBD7u4I0gYYVU1skuI70Ic+o8ZSf3LL
vrrlYayLgjxAYlVYdXPWZj9X3+abZTVdsw0CQDStVFRXrKEXAjiyK8xxtLBDd8t1
z2LI63QDwCsdLkxOk4b1WfRgvuql1VCIV4DCVoECoPm4AMU2uDRAbyOUVN8CQAIn
CG5XPxvQsaNBf3rleedi0247KgZmvIPYZruHaPYK9jdrK3NQPPxE+oef+AYtquC/
0oMsCm0jxIP1p2CrYQECQQDU9kajhbNsAcpD17cVcGZBudv1XaxkN8U15Jr1c+2b
JfZ8nOVmE6AyJUe717i4qnNR7MiJRrAbwnPbsLGUL8T1
-----END RSA PRIVATE KEY-----`;

  export default {
    data() {
      return {
        publicKey: DEFAULT_PUBLIC_KEY,
        privateKey: DEFAULT_PRIVATE_KEY,
        encryptContext: new JSEncrypt(),
        decryptContext: new JSEncrypt(),
        text: 'uni-app',
        encryptedString: '',
        decryptedString: '',
      }
    },
    methods: {
      initKey() {
        this.encryptContext.setPublicKey(this.publicKey);
        this.decryptContext.setPrivateKey(this.privateKey);
        uni.showToast({
          title: '初始化完成'
        });
      },
      encryptData() {
        this.encryptedString = this.encryptContext.encryptLong(this.text);
      },
      decryptData() {
        this.decryptedString = this.decryptContext.decryptLong(this.encryptedString);
      }
    }
  }
</script>

<style>
  .content {
    padding: 15px 10px;
  }

  .row {
    margin: 10px 0;
  }

  .value {
    border: 1px solid #007aff;
    width: 100%;
  }

  .btn-row {
    display: flex;
    flex-direction: row;
  }

  .result {
    display: flex;
    flex-direction: column;
  }

  .crypto-text {
    word-break: break-all;
  }
</style>
